import React from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Grid } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import styles from './AllApps.module.css';

function AllApps() {
  const navigate = useNavigate();

  // 校园生活应用
  const campusLifeApps = [
    {
      id: 1,
      title: '学校介绍',
      icon: '🏫',
      color: '#1890ff',
      bgColor: '#e6f7ff',
      route: '/school-intro'
    },
    {
      id: 2,
      title: '校内新闻',
      icon: '📰',
      color: '#52c41a',
      bgColor: '#f6ffed',
      route: '/campus-news'
    },
    {
      id: 3,
      title: '成绩查询',
      icon: '📊',
      color: '#fa8c16',
      bgColor: '#fff7e6',
      route: '/grade-query'
    },
    {
      id: 4,
      title: 'AI 助手',
      icon: '🤖',
      color: '#722ed1',
      bgColor: '#f9f0ff',
      route: '/ai-chat'
    },
    {
      id: 5,
      title: '扫一扫',
      icon: '📱',
      color: '#13c2c2',
      bgColor: '#e6fffb',
      route: '/qr-scanner'
    }
  ];

  // 校园卡应用
  const campusCardApps = [
    {
      id: 6,
      title: '常见问题',
      icon: '❓',
      color: '#722ed1',
      bgColor: '#f9f0ff',
      route: '/card-faq'
    }
  ];

  const handleAppClick = (route) => {
    navigate(route);
  };

  const handleBack = () => {
    navigate(-1);
  };

  return (
    <div className={styles.container}>
      {/* 导航栏 */}
      <NavBar
        onBack={handleBack}
        backIcon={<LeftOutline />}
        className={styles.navbar}
      >
        全部应用
      </NavBar>

      {/* 主要内容 */}
      <div className={styles.content}>
        {/* 校园生活模块 */}
        <div className={styles.section}>
          <div className={styles.sectionHeader}>
            <div className={styles.sectionIcon}>🏫</div>
            <h2 className={styles.sectionTitle}>校园生活</h2>
          </div>
          <div className={styles.appGrid}>
            {campusLifeApps.map((app) => (
              <div
                key={app.id}
                className={styles.appCard}
                onClick={() => handleAppClick(app.route)}
                style={{
                  '--app-color': app.color,
                  '--app-bg-color': app.bgColor
                }}
              >
                <div className={styles.appIconWrapper}>
                  <div className={styles.appIcon}>{app.icon}</div>
                </div>
                <div className={styles.appTitle}>{app.title}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 校园卡模块 */}
        <div className={styles.section}>
          <div className={styles.sectionHeader}>
            <div className={styles.sectionIcon}>💳</div>
            <h2 className={styles.sectionTitle}>校园卡</h2>
          </div>
          <div className={styles.appGrid}>
            {campusCardApps.map((app) => (
              <div
                key={app.id}
                className={styles.appCard}
                onClick={() => handleAppClick(app.route)}
                style={{
                  '--app-color': app.color,
                  '--app-bg-color': app.bgColor
                }}
              >
                <div className={styles.appIconWrapper}>
                  <div className={styles.appIcon}>{app.icon}</div>
                </div>
                <div className={styles.appTitle}>{app.title}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default AllApps;